import { RightOutlined } from '@ant-design/icons';
import { Image } from 'antd';
import { useState, useEffect } from 'react';

import commonService from '@/api/services/commonService';

export default function CreatePage() {
  const [banner1, setBanner1] = useState<any>({});
  const [banner5, setBanner5] = useState<any>({});
  const [banner7, setBanner7] = useState<any>({});
  const [list2, setList2] = useState<any>([]);
  const [list3, setList3] = useState<any>([]);
  const [list4, setList4] = useState<any>([]);
  const [list6, setList6] = useState<any>([]);

  useEffect(() => {
    commonService.getCustomApi('/front/create', {}).then((res) => {
      setBanner1(res.banner1);
      setBanner5(res.banner5);
      setBanner7(res.banner7);
      setList2(res.list2);
      setList3(res.list3);
      setList4(res.list4);
      setList6(res.list6);
    });
  }, []);

  const toDesign = (url: string) => {
    window.location.href = `/#/editor`;
    // await setEditorDate(good.id);
  };

  const jump = (url: string) => {
    window.location.href = url;
  };

  const arr: any = ['T恤', '长袖'];

  return (
    <>
      <div className="relative left-[50%] ml-[-712px] mt-[40px] flex w-[1424px] flex-col">
        <div>首页 / 创作</div>

        <div className="banner1 relative mt-[20px] h-[500px]">
          <Image src={banner1.picPath} alt="" preview={false} />
          <div className="go-create absolute right-[80px] top-[100px] h-[300px] w-[460px] rounded-[12px] bg-[rgba(255,255,255,0.6)] px-[20px] pt-[80px]">
            <div className="mb-[48px] text-center text-[24px] leading-[34px] text-[#363A44]">
              使用我们的在线编辑器、创建属于你的个性化衣服
            </div>
            <div className="flex justify-center">
              <div
                onClick={() => toDesign(banner1.href)}
                className="h-[60px] w-[140px] cursor-pointer rounded-[8px] bg-[#FD7901] text-center text-[24px] leading-[60px] text-[#ffffff]"
              >
                去创作
              </div>
            </div>
          </div>
        </div>

        <div className="mb-[20px] mt-[100px] text-center text-[32px] text-[#363A44]">
          定制属于你的衣服
        </div>
        <div className="text-center text-[20px] text-[#686B73]">
          将您想要的图像、图形和文本添加到我们的任何服装选项中 -
          或从现有设计开始，使其成为您自己的设计。
        </div>

        <div className="list2 mb-[40px] mt-[40px] flex justify-between">
          {list2.map((item: any, index: number) => (
            <div key={item.id} className="relative h-[400px] w-[700px]">
              <Image src={item.picPath} preview={false} />
              <div
                className="absolute bottom-[20px] left-[20px] h-[70px] w-[140px] bg-[#FD7901] pt-[6px] text-center text-[#fff]"
                style={{ borderRadius: 4 }}
              >
                <p className="text-[20px]">{arr[index]}</p>
                <p className="cursor-pointer text-[16px]" onClick={() => toDesign(item.href)}>
                  创作你的作品
                  <RightOutlined />
                </p>
              </div>
            </div>
          ))}
        </div>

        <div className="list3 mb-[100px] flex justify-between">
          {list3.map((item: any) => (
            <div key={item.id} className="cursor-pointer" onClick={() => jump(item.href)}>
              <div className="h-[272px] w-[272px]">
                <Image src={item.picPath} preview={false} />
              </div>
              <div className="mt-[10px] text-left">{item.title}</div>
            </div>
          ))}
        </div>

        <div className="mb-[40px] mt-[100px] text-center text-[32px] text-[#363A44]">
          适合所有人的定制
        </div>
        <div className="list4 mb-[100px] flex justify-between">
          {list4.map((item: any) => (
            <div key={item.id} className="cursor-pointer" onClick={() => jump(item.href)}>
              <div className="h-[580px] w-[458px]">
                <Image src={item.picPath} preview={false} />
              </div>
              <div className="mt-[10px] text-left">{item.title}</div>
            </div>
          ))}
        </div>
      </div>

      <div
        className="banner5 mb-[120px] flex h-[700px] w-[100%] justify-center  bg-[rgba(253,121,1,0.06)]
      pb-[100px] pt-[100px]"
      >
        <div className="flex w-[1424px] items-center">
          <div className="mr-[40px] w-[920px]">
            <Image src={banner5.picPath} alt="" preview={false} />
          </div>
          <div>
            <div className="mb-[20px] text-[50px] text-[#363A44]">企业服装</div>
            <div className="mb-[42px] text-[24px] text-[#686B73]">
              可以定制服装来帮助推广您的品牌
            </div>
            <div
              onClick={() => toDesign(banner5.href)}
              className="h-[60px] w-[140px] cursor-pointer rounded-[8px] bg-[#FD7901] text-center text-[24px] leading-[60px] text-[#ffffff]"
            >
              去创作
            </div>
          </div>
        </div>
      </div>

      <div className="mb-[40px] mt-[100px] text-center text-[32px] text-[#363A44]">
        庆祝，怎么少得了定制礼物
      </div>
      <div className="list6 m-auto mb-[100px] flex w-[1424px] justify-between">
        {list6.map((item: any) => (
          <div key={item.id}>
            <div className="h-[436px] w-[344px] cursor-pointer" onClick={() => jump(item.href)}>
              <Image src={item.picPath} preview={false} />
            </div>
            <div className="mt-[10px] text-left">{item.title}</div>
          </div>
        ))}
      </div>

      <div className="mb-[40px] mt-[100px] text-center text-[32px] text-[#363A44]">
        如何定制服装
      </div>
      <div
        className="banner7 mb-[120px] flex h-[700px] w-[100%] justify-center  bg-[rgba(253,121,1,0.06)]
      pb-[100px] pt-[100px]"
      >
        <div className="flex w-[1424px] items-center">
          <div className="mr-[40px] w-[920px]">
            <Image src={banner7.picPath} alt="" preview={false} />
          </div>
          <div>
            <div className="mb-[42px] text-[28px] text-[#686B73]">
              <p>· 选择您的产品</p>
              <p>· 使用我们的设计器</p>
              <p>· 编辑好图案文字</p>
              <p>· 下订单，您就完成了！</p>
            </div>
            <div
              onClick={() => toDesign(banner7.href)}
              className="h-[60px] w-[140px] cursor-pointer rounded-[8px] bg-[#FD7901] text-center text-[24px] leading-[60px] text-[#ffffff]"
            >
              去创作
            </div>
          </div>
        </div>
      </div>
    </>
  );
}
